<!--_meta 作为公共模版分离出去-->
<#include "include/_meta.html">
<!--/meta 作为公共模版分离出去-->

<title>添加管理员 - 管理员管理</title>
<meta name="keywords" content="汽车租赁">
<meta name="description" content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="form-car-add" >
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车牌号：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off"  value="" placeholder="车牌号" id="carcode" name="carcode" >
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆颜色：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="车辆颜色" id="carcolor" name="carcolor">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>购买日期：</label>
		<div class="formControls col-xs-8 col-sm-9">
		<!--	<input type="password" class="input-text" autocomplete="off" value="" placeholder="购买日期" id="password2" name="password2"> -->
		<input type="text" autocomplete="off" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" id="buydate" class="input-text Wdate" style="width:120px;">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>发动机号：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="发动机号" id="enginenum" name="enginenum">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车架号：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="车架号" id="framenum" name="framenum">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主手机：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" autocomplete="off" placeholder="车主手机" name="mobile" id="mobile">
		</div>
	</div>
<!--	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">角色：</label>
		<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
			<select class="select" id="adminRole" name="adminRole" size="1">
				<option value="0">超级管理员</option>
				<option value="1">总编</option>
				<option value="2">栏目主辑</option>
				<option value="3">栏目编辑</option>
			</select>
			</span> </div>
	</div> -->

<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="身份证号" id="idcard" name="idcard">
		</div>
	</div>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主姓名：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="车主姓名" id="name" name="name">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">车辆类型：</label>
		<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
			<select class="select" id="cartype" name="cartype" size="1">
				<option value="经济型">经济型</option>
				<option value="舒适性">舒适性</option>
				<option value="精英型">精英型</option>
				<option value="SUV">SUV</option>
				<option value="七座MPV">七座MPV</option>
				<option value="电动型">电动型</option>
			</select>
			</span> </div></br>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆品牌：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" autocomplete="off" value="" placeholder="车辆品牌" id="carbrand" name="carbrand">
		</div>
	</div>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>品牌型号：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" autocomplete="off" placeholder="品牌型号" id="carbrandtype" name="carbrandtype">
		</div>
	</div>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>合同日期：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" autocomplete="off" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" id="contractdate" class="input-text Wdate" style="width:120px;">
		</div>
	</div>

    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">自动手动：</label>
        <div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
			<select class="select" id="isauto" name="isauto" size="1">
				<option value="0">手动</option>
				<option value="1">自动</option>
			</select>
			</span> </div></br>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>排量大小：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" autocomplete="off" placeholder="排量大小" id="enginesize" name="enginesize">
		</div>
	</div>
	
	
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>座位数量：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" autocomplete="off" placeholder="座位数量" id="seatnum" name="seatnum">
		</div>
	</div>
<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>外观类型：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" value="" autocomplete="off" placeholder="外观类型" id="facetype" name="facetype">
		</div>
</div>
<div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆图片：</label>
        <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" readonly="readonly" value="" placeholder="车辆图片"  id="picid" name="picid">            
        </div>
    </div>
     
<div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>缩略图：</label>
        <div class="formControls col-xs-8 col-sm-9" id="uploader-demo" style="withed:150px;height:150px" >
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker">选择图片</div>         
        </div>
</div> 
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" onclick="$('#form-car-add').submit()"/>
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<#include "include/_footer.html">
<!--/_footer /作为公共模版分离出去--> 
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript">


$(function(){
var uploader = WebUploader.create({
auto: true,
swf: 'lib/webuploader/0.1.5/Uploader.swf',
server: '/uploadFile',
pick: '#filePicker',
fileVal:'uploadfile',
resize: false,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'          
}

});

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name+ '</div>' +
            '</div>'
            ),
        $img = $li.find('img');
    // $list为容器jQuery实例
   
    $("#uploader-demo").append($li );

    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
           
            return;
        }
         
        $img.attr( 'src', src );
    }, "100","100");
});





// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }

    $percent.css( 'width', percentage * 100 + '%' );
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,response ) {
     if($("#picid").val()==''){
            $("#picid").attr("value",(response.flag));
        }else{
            $("#picid").attr("value",($("#picid").val()+','+response.flag));
        }
   
    $( '#'+file.id ).addClass('upload-state-done');
});

// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');

    // 避免重复创建
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }

    $error.text('上传失败');
});

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});

	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-car-add").validate({
		rules:{
			carcode:{
				required:true,				
			},

			name:{
				required:true,
				minlength:2,
				maxlength:6
				},
			idcard:{
				required:true
				
				},	
			mobile:{
				required:true,
				isMobile:true,
				minlength : 11
			},
		carcolor:{
				required:true,				
			},
			enginenum:{
				required:true,				
			},
			framenum:{
				required:true,				
			},
			idcard:{
				required:true,	
				isIdCardNo:true			
			},
			carbrand:{
				required:true,				
			},
			carbrandtype:{
				required:true,				
			},
			enginesize:{
				required:true,				
			},
			seatnum:{
				required:true,				
			}
		},
		
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			
	   		$.ajax({
	            type: 'post',  
	            url: '/cars/add', 
	            data:{
						'carcode': $("#carcode").val(),
		                'carcolor': $("#carcolor").val(),
		                'buydate': $("#buydate").val(),
		                'enginenum': $("#enginenum").val(),
		                'framenum': $("#framenum").val(),
		                'mobile': $("#mobile").val(),
		                'idcard': $("#idcard").val(),
		                'name': $("#name").val(),
						'cartype': $("#cartype").val(),
		                'carbrand': $("#carbrand").val(),
		                'carbrandtype': $("#carbrandtype").val(),
						'contractdate':$("#contractdate").val(),
						'picid':$("#picid").val(),
		                'isauto': $("#isauto").val(),
						'enginesize': $("#enginesize").val(),
		                'seatnum': $("#seatnum").val(),
		                'facetype': $("#facetype").val(),
						'carstate':1
						},
	            success:function(data){ 
					alert("提交成功！");
					window.location.reload();
	            }
	
	        });

			
		}
	});
});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>